import { useEffect, useRef, useState } from 'react';
import { Row, Col, Space, Tag } from 'antd';
import classNames from 'classnames';
import ReportCore from './assessReportCore';
import TimesReport from './assessTimesReport';
import styles from './index.less';

const assessTimes = [
  {
    punish: 1140,
    praise: 13733,
    assessFor: null,
    x: '奖励',
    y: 13733,
  },
  {
    punish: 1140,
    praise: 13733,
    assessFor: null,
    x: '惩戒',
    y: 1140,
  },
];

const summaryData = [
  {
    id: 0,
    code: null,
    name: null,
    typeName: '数学',
    parentTypeName: null,
    indexName: null,
    flag: 0,
    score: 120,
    indexList: null,
  },
  {
    id: 0,
    code: null,
    name: null,
    typeName: '体育',
    parentTypeName: null,
    indexName: null,
    flag: 0,
    score: 24,
    indexList: null,
  },
  {
    id: 0,
    code: null,
    name: null,
    typeName: '语文',
    parentTypeName: null,
    indexName: null,
    flag: 0,
    score: 6,
    indexList: null,
  },
  {
    id: 0,
    code: null,
    name: null,
    typeName: '英语',
    parentTypeName: null,
    indexName: null,
    flag: 0,
    score: 6,
    indexList: null,
  },
];

export default () => {
  return (
    <div
      className={classNames('campus-activity-wrapper', styles.wrapper)}
      style={{ display: 'flex' }}
    >
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span style={{ marginLeft: 10 }}>班级学生评价统计</span>
          </Row>
        </Col>
        <Col flex="40px" style={{ display: 'flex' }}>
          <Space align="center">
            <Tag color="processing">本周</Tag>
            <Tag color="default">上周</Tag>
            <Tag color="default">本月</Tag>
            <Tag color="default">上月</Tag>
            <Tag color="default">本学期</Tag>
            <Tag color="default">上学期</Tag>
            <Tag color="default">本学年</Tag>
          </Space>
        </Col>
        <Col flex={1}>
          <Row style={{ height: 270 }}>
            <Col span={12}>
              <TimesReport chartData={assessTimes} />
            </Col>
            <Col span={12}>
              <ReportCore summaryData={summaryData} />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
